
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>噜噜啦</title>

    <script>
        //判断客户端设备，选择写入meta
        function init_viewport(){
            if(navigator.userAgent.indexOf('Android') != -1){
                var version = parseFloat(RegExp.$1);
                if(version>2.3){
                    var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth;
                    var phoneScale = parseInt(width)/500;
                    document.write('<meta name="viewport" content="width=500, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
                }else{
                    document.write('<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">');
                }
            }else if(navigator.userAgent.indexOf('iPhone') != -1){
                var phoneScale = parseInt(window.screen.width)/500;
                document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale +', maximum-scale='+phoneScale+', user-scalable=0" /> ');         //0.75   0.82
            }else{
                document.write('<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> '); //0.75  0.82
            }
        }
        init_viewport();
    </script>

    <style>
        * {
            padding: 0px;
            margin: 0px;
            -webkit-box-sizing: border-box;
        }
        body {
            background-color: white;
        }
        a {
            color: white;
            text-decoration: none;
        }

        #div_container { /*最外层div，用于居中兼容PC和移动*/
            width: 500px;
            margin: 0px auto;
            position: relative;
            /*background-color: #FAFAFA;*/
            font-size: 1em;
        }


        .div_pure_words { /*文字部分的最外层，用于定位*/
            position: relative;
            display: none;
        }
        .div_pure_words_bg { /*背景设置在这里*/
            background-repeat: repeat;
            background-size: 100%;
            background-attachment: fixed;
            width: 500px;
            min-height: 500px;
        }
        .div_pure_words_height {
            visibility: hidden;
            padding: 30px;
            text-align: justify;  /*为了使文字两端对齐 */
            white-space: pre-wrap; /*保留换行效果*/
            font-size: 1.1em;
            font-family: "Microsoft YaHei","Arial";
            color: white;
        }
        .div_pw_typed {
            position: absolute;
            left: 0;
            right: 0;  /*4个方向定位使div充满整个画画*/
            top: 0;
            bottom: 0;  /*4个方向定位使div充满整个画画*/
            width: 500px;
            background:rgba(255,255,255,0.8); /*半透明效果*/
            padding: 30px;
            text-align: justify;  /*为了使文字两端对齐 */
        }
        #span_pw_typed {
            width:100%; /*为了使文字两端对齐 */
            white-space:pre-wrap; /*保留换行效果*/
            font-size: 1.1em;
            font-family: "Microsoft YaHei","Arial";
        }


        #div_start_bg{
            width: 100%; height: 100%;
            position: absolute;
            left: 0px; top: 0px;
            z-index: 44;
            background-color: white;
        }
    </style>

    <!-- 按钮部分的样式 -->
    <link type="text/css" rel="stylesheet" href="css/theme_public_btn.css">












    <!-- 按需加载，选择此片头时方才加载 -->
    <link type="text/css" rel="stylesheet" href="css/start_onlyyou.css">


</head>

<body>
<div id="div_container"> <!-- 最外层div，用于居中兼容PC和移动 -->
    <div id="div_start_bg"></div> <!-- 用于遮挡主题，作为片头的背景 -->



    <!-- 按需加载，选择此片头时方才加载 -->













    <!-- 按需加载，选择此片头时方才加载 -->
    <div id="div_onlyyou"><!-- 用于设置背景 -->
        <div id="div_oy_inner"><!-- 用于存放content -->
            <div class="div_oy_text">
                <h1></h1>
                <img class="img_oy_text" src="">
                <p class="p_oy_text"></p>
                <ul id="ul_oy_benefit">
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                    <li class="li_oy_benefit"></li>
                </ul>
            </div>
            <ul id="ul_oy_btn">
                <li onclick="oy_go_next()">Yes&nbsp;&nbsp;❤</li>
                <li onclick="oy_show_benefit()">No&nbsp;&nbsp;✖</li>
            </ul>
            <div id="div_oy_note" onclick="oy_hide_note()">
                <img src="images/emoji_kelian.jpg" alt=""><br>
                请告诉我Yes！
                <div id="div_oy_note_close">✖</div>
            </div>
            <div id="div_oy_yes">
                <img src="images/emoji_bixin.jpg" alt=""><br>
                太好了！哈哈~
            </div>
        </div>
    </div>

    <!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 -->
    <!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 -->
    <!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 -->
    <!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 -->
    <!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 -->






    <div class="div_pure_words"> <!-- 文字部分的最外层，用于定位 -->
        <div class="div_pure_words_bg"><!-- 背景设置在这里 -->
            <div class="div_pure_words_height">
                <!-- 正文的内容复制到这里面，撑开整个文档的高度 -->
            </div>
        </div>
        <div class="div_pw_typed"> <!-- 正文部分，绝对定位 -->
            <span id="span_pw_typed"></span>
        </div>
    </div>









    <div id='div_btn_container'> <!-- 按钮部分的最外层，处于文档流之中 -->
        <div id="div_btn_inner"> <!-- 按钮部分内层，用于定位 -->

            <div class='div_music_tips'></div>
            <div class="div_btn" id="div_music" onclick="music_switch()"> <!-- 音乐按钮部分 -->
                <img id='img_music' src='images/music_note_big.png' style='-webkit-animation:music_play_rotate 1s linear infinite'>
                <audio id="audio_music" autoplay="autoplay" loop="loop">
                    <source type="audio/mpeg"/>
                    <!-- 您的浏览器不支持播放音乐 -->
                </audio>
            </div>

            <div class='div_record_tips'></div>
            <div class="div_btn" id="div_record" onclick="record_switch()"> <!-- 录音按钮部分 -->
                语音
                <audio id="audio_record" loop="loop">
                    <source type="audio/mpeg"/>
                    <!-- 您的浏览器不支持播放音乐 -->
                </audio>
            </div>

            <!-- 只在提交状态显示 只在提交状态显示 只在提交状态显示 只在提交状态显示 -->
            <div class="div_btn" id='div_support'>
                <a href="https://mp.weixin.qq.com/s/U9F3FY-_HBcKL8Nvd_DdnA"><span>更多</span></a>
            </div>
            <!-- 只在提交状态显示 只在提交状态显示 只在提交状态显示 只在提交状态显示 -->

            <!-- 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 -->

            <!-- 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 -->
        </div>
    </div>
</div>







<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/typed.min.js"></script>
<script src="js/support_upload_as.js"></script>
<script src="js/jweixin-1.2.0.js"></script>
<script>
    var window_height=$(window).height();
    console.log('window_height ->'+window_height);

    var theme='pure_words';
    console.log('theme ->'+theme);
    var theme_content={"pure_words_content":"\r\n                          \u521d\u8bc6\u4f60\u540d\uff0c\u4e45\u5c45\u6211\u5fc3\r\n\r\n                          \u82b1\u5f00\u6210\u6d77\uff0c\u601d\u4f60\u6210\u707e\r\n\r\n                          \u4e00\u4eba\u4e00\u5fc3\uff0c\u767d\u9996\u4e0d\u79bb\r\n\r\n                          \u51e0\u4efd\u75f4\u60c5\uff0c\u51e0\u4efd\u5728\u610f\r\n\r\n                          \u5c3d\u6211\u6240\u80fd\uff0c\u7231\u4f60\u6240\u6709\r\n\r\n                          \u627f\u8499\u539a\u7231\uff0c\u8bf7\u591a\u6307\u6559\r\n\r\n                          \u643a\u5b50\u4e4b\u624b\uff0c\u966a\u4f60\u5230\u8001\r\n\r\n                          \u4e45\u4f34\u4e0d\u79bb\uff0c\u6b64\u751f\u4e0d\u5f03\r\n\r\n                          \u4f59\u751f\u5f88\u957f\uff0c\u591a\u591a\u6307\u6559","typed_bool":"typed_n","cursor_char":"cursor_heart","bg_style_pure_words":"bg_opacity","bg_img":"https://txmov2.a.yximgs.com/ufile/atlas/NTI1NDAxMTk3MDM5MjcxNDU4OV8xNjI1NzM1MTMyNDE5_0.jpg","simple_page_content":"","video_page_content":""};
    console.log(theme_content);

    var music_json={"music_select":"m_online","m_online_id":"7","m_online_url":"https://sf6-cdn-tos.douyinstatic.com/obj/tos-cn-ve-2774/f500824206a140a5a0aaf7d1d57c7161","m_upload_name":"null","m_upload_url":"null"};
    console.log(music_json);
    var record_json={"record_bool":"r_false","r_wechat_time":"null","r_wechat_url":"null","r_wechat_amr":"null"};
    console.log(record_json);
    var signPackage={"appid":"wx47f716bdd7699533","timestamp":1582779658,"nonceStr":"9r1J2zIXLtP5i5Cb","url":"http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdomWxj","signature":"1daeb43ac7fd817f85950056b1b88b26326fb107","rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VHINcjHJVwMsFjJyfreRy7AZTG3Zqsstt3gIqEgC-AsGhGJBqojPr4PWuXeUZSHgUQ&noncestr=9r1J2zIXLtP5i5Cb&timestamp=1582779658&url=http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdomWxj"};

    var main_title='我喜欢你❤️';
    // console.log(main_title);
    if(main_title=='' || main_title=='null'){  //允许标题为空
        document.title='慢慢喜欢你';
    }
    // console.log("");


    var pure_words_content=theme_content['pure_words_content'];
    var str_cursorChar;
    var typed_bool;

    var interval_pw_height;
    var height_div_pw=$(".div_pure_words_height").height();
    function init_pure_words(){
        //允许内容为空时直接展示，不设置为随机内容，用于空主题
        if(typeof(pure_words_content)=='undefined'){ //处理全新作品
            var array_str_temp=[];
            random_text_array(array_str_temp,12); //获取随机的模板文字
            // array_str_temp.push('你现在看到的只是案例，文字是可以自定义哒，6000字以下');
            pure_words_content=array_str_temp.join('\r\r');
        }
        $(".div_pure_words_height").html(pure_words_content+'22222');  //初始化复制内容，撑开文档高度

        // 初始化设置div的bg图片 初始化设置div的bg图片
        if(typeof(theme_content['bg_style_pure_words'])!='undefined' && theme_content['bg_style_pure_words']=='bg_opacity'){
            if(typeof(theme_content['bg_img'])!='undefined' && theme_content['bg_img']!=''){
                $(".div_pure_words_bg").css({"background-image": "url("+theme_content['bg_img']+")"});
            }
        }

        //以下是打字效果的js
        if(typeof(theme_content['cursor_char'])!='undefined' && theme_content['cursor_char']!=''){
            switch(theme_content['cursor_char']){ //设置打字光标的样式
                case 'cursor_heart':
                    str_cursorChar='❤';
                    break;
                case 'cursor_sub':
                    str_cursorChar='_';
                    break;
                case 'cursor_music':
                    str_cursorChar='♫';
                    break;
                case 'cursor_star':
                    str_cursorChar='★';
                    break;
                case 'cursor_sun':
                    str_cursorChar='☀';
                    break;
                default:
                    str_cursorChar='|';
            }
        }else{ //处理全新作品，默认显示打字效果
            str_cursorChar='❤';
        }

        //判断用户有没有选择打字效果
        if(typeof(theme_content['typed_bool'])!='undefined' && theme_content['typed_bool']!=''){
            typed_bool= theme_content['typed_bool']=='typed_y' ? true : false;
        }else{
            typed_bool=false; //默认显示打字效果
        }
        // console.log(typed_bool);

        display_pure_words();
        $(".div_pure_words").fadeIn();

        interval_pw_height=setInterval(function(){
            console.log('div_pure_words_height -> '+$('.div_pure_words_height').height());
            var least_height_div_pw=$('.div_pure_words_height').height();
            if(least_height_div_pw>height_div_pw){
                height_div_pw=least_height_div_pw;
            }else{
                clearInterval(interval_pw_height);
                $(".div_pure_words_height").height(least_height_div_pw+100);
                if($(".div_pure_words_height").height()<window_height){
                    $(".div_pure_words_height").height(window_height); //不能小于窗口的高度
                    console.log('let us be high as window');
                }
            }
        },100);
    }


    function display_pure_words(){
        if(typed_bool){
            var typed_pure_words = new Typed('#span_pw_typed', {
                strings: [pure_words_content], //输入内容, 支持html标签
                typeSpeed: 120, //打字速度
                cursorChar: str_cursorChar,//替换光标的样式
                contentType: 'html', //值为html时，将打印的文本标签直接解析html标签
                onComplete: function(abc){
                    // console.log(abc);
                    console.log('finished typing words');
                    // console.log($('#span_pw_typed').height()-$(".div_pure_words_height").height());
                },
            });
        }else{
            //如果不需要打字效果就直接显示
            $("#span_pw_typed").html(pure_words_content).fadeIn();
        }
        init_attachment();
    }


    function random_text_array(temp_array,length){  //获取随机的模板文字
        console.log('random_text_array');
        var random_array=[];
        while(random_array.length<length){
            // var random_num=Math.floor(Math.random()*(array_as_pics.length-0))+0;
            var random_num=Math.floor(Math.random()*(array_as_words_love.length)); //随机取值
            if(random_array.indexOf(random_num)==-1){
                random_array.push(random_num);
            }
        }
        // console.log(random_array);
        for(var i=0; i<length; i++){
            temp_array.push(array_as_words_love[random_array[i]]); //获取随机的模板文字
        }
    }

</script>









<!-- 按需加载，选择此片头时方才加载 -->


<script>
    var start_content={"chase_title":"\u771f\u7684\u597d\u559c\u6b22\u4f60","chase_text":"\u6625\u98ce\u5341\u91cc\uff0c\u4e0d\u53ca\u76f8\u9047\u6709\u4f60\uff1b \u6674\u7a7a\u4e07\u91cc\uff0c\u4e0d\u53ca\u5fc3\u4e2d\u6709\u4f60\uff1b\u4eba\u6d77\u5341\u4e07\u91cc\uff0c\u6211\u53ea\u60f3\u8981\u4f60\ud83c\udf08\ud83c\udf1f\ud83d\udc84\u2601\ufe0f\ud83c\udf52","chase_benefit":["\u6211\u559c\u6b22\u4f60\uff0c\u5c31\u50cf\u5c0f\u65f6\u5019\u559c\u6b22\u8fa3\u6761\uff0c\u6ca1\u6709\u9053\u7406\ud83e\udd70","\u6211\u559c\u6b22\u4f60\uff0c\u591a\u60f3\u8de8\u8fc7\u624b\u673a\u62b1\u4f4f\u4f60\uff0c\u800c\u4e0d\u662f\u62b1\u7740\u624b\u673a\u60f3\u4f60\ud83d\udc96","\u6211\u559c\u6b22\u4f60\uff0c\u591a\u60f3\u6bcf\u5929\u65e9\u665a\u90fd\u6709\u4f60\uff0c\u800c\u4e0d\u662f\u7167\u7247\u4e2d\u7684\u4f60\ud83d\udc97","\u6211\u559c\u6b22\u4f60\uff0c\u4eca\u751f\u7684\u7231\uff0c\u53ea\u60f3\u7ed9\u4f60\ud83d\udc95","\u6211\u559c\u6b22\u4f60\uff0c\u5f80\u540e\u4f59\u751f\uff0c\u6211\u53ea\u8981\u4f60\ud83d\udc9e"],"bg_style":"bg_custom","bg_img":"https://txmov2.a.yximgs.com/ufile/atlas/NTI1NDAxMTk3MDM5MjcxNDU4OV8xNjI1NzM1MTMyNDE5_1.jpg","img_bool":"img_true","img_src":"https://p3.toutiaoimg.com/img/tos-cn-i-0022/c0e9eeebc66b416b95d43831a405767c~tplv-obj:400:225.gif?from=post"}; //可能为null
    console.log(start_content);

    var start_id;
    $(function(){
        //此事件为触发互动创意
        start_id='onlyyou'; //可能为null
        init_start(start_id);
    });

    function init_start(start_id){
        console.log('init_start ->'+start_id);
        switch(start_id){
            case 'loveformat':
                $('.div_loveformat').show();
                init_loveformat();
                break;
            case 'hearttree':
                $('#div_hearttree').show();
                init_hearttree();
                break;
            case 'courage':
                $('#div_courage').show();
                init_courage();
                break;
            case 'birthdaycake':
                $('#div_dbcake').show();
                init_birthdaycake();
                break;
            case 'intersect':
                $('#div_intersect').show();
                init_intersect();
                break;
            case 'onlyyou':
                $('#div_onlyyou').show();
                init_onlyyou();
                break;
            default:
                init_theme();
        }
    }

    //开始动画主体部分
    function init_theme(){
        console.log('init_theme');
        $('#div_start_bg').fadeOut();
        init_pure_words();
    }

</script>















<!-- 按需加载，选择此片头时方才加载 -->
<script src="js/start_onlyyou.js"></script>



<script>
    var attachment='null'; //可能为null
    var attached_content={"bool_save":false}; //可能为null
    console.log(attached_content);

    function init_attachment(){  //开始attachment
        console.log('init_attachment ->'+attachment);
        switch(attachment){
            case 'timer':
                init_at_timer();
                break;
            default:
                return;
        }
    }
</script>




<script src='js/jweixin-1.2.0.js'></script>
<script src='js/theme_common.js'></script> <!-- 音乐控制和微信设置等公共部分js外部引入 -->





</body>
</html>